<template lang="html">
     <chart
    class="x-pie"
    :chartid='chartId'
    :option = 'options'
    :title='optionData.title'
  	>
    </chart>
</template>


<script>
	import chart from './chart.vue'
	export default {
		  components : {
		    chart,
		  },
		  props:{
		  	    chartId :{
			      type : String,
			    },

			    data : {
			      type : Object,
			    },
			    optionData:{
			    	type:Object,
			    },
          formatter : {
            type : String,
            default : '{a0} : {c0}<br/>{a1} : {c1}<br/>{a2} : {c2}%<br/>{a3} : {c3}%'
          }
		  },
		  data(){
		  		return{
					options : {
					    tooltip: {
					        trigger: 'axis',
					        axisPointer: {
					            type: 'cross',
					            crossStyle: {
					                color: '#999'
					            }
					        },
                  formatter : function(params){
					           var relVal = params[0].name;
					           for (var i = 0, l = params.length; i < l; i++) {
					           		if(i == 0){
					           			relVal += '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(0,185,96,.85);"></span>' + params[i].seriesName + ' : ' + params[i].value;
					           		}else if(i == 1){
					           			relVal += '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(113,129,248,.85);"></span>' + params[i].seriesName + ' : ' + params[i].value;
					           		}else if(i == 2){
					           			relVal += '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(0,185,96,.85);"></span>' + params[i].seriesName + ' : ' + params[i].value+"%";
					           		}else{
					           			relVal += '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(113,129,248,.85);"></span>' + params[i].seriesName + ' : ' + params[i].value+"%";
					           		}

					            }
					           return relVal;
					     }
					    },
					    toolbox: {
					        feature: {
					            dataView: {show: true, readOnly: false},
					            magicType: {show: true, type: ['line', 'bar']},
					            restore: {show: true},
					            saveAsImage: {show: true}
					        }
					    },
					    legend: this.optionData.legend,
					    xAxis: this.optionData.xAxis,
					    yAxis: this.optionData.yAxis,
					    series: this.optionData.series,
					},

		  		}
		  }
	}

</script>

<style>
</style>
